<template>
  <div class="right-online-monitor colbetweenbox">
    <!-- 表单 -->
    <div class="right-online-monitor-form">
      <el-form ref="form" :inline="true" :model="form" label-width="1.3rem">
        <el-row>
          <!-- <el-col :span="6">
            <el-form-item label="监测类型：">
              <el-select v-model="form.subordinateToSubsystem" size="small" placeholder="请选择">
                <el-option
                  v-for="item in subordinateToSubsystem_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="6">
            <el-form-item label="点位类型：">
              <el-select
                v-model="form.pointerType"
                size="small"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item in pointerType_options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="点位名称：">
              <el-input v-model="form.pointerName" placeholder clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否弹窗：">
              <el-select v-model="form.openModel" size="small" placeholder="请选择" clearable>
                <el-option
                  v-for="item in openModel_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否推送：">
              <el-select v-model="form.isPush" size="small" placeholder="请选择" clearable>
                <el-option
                  v-for="item in isPush_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="18">
            <div class="endbox">
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="primary" @click="onEdit">批量修改</el-button>
              <el-button type="primary" @click="onReset">批量重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="right-online-monitor-table">
      <el-table
        :data="tableData"
        ref="multipleTable"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        :row-key="(row)=>{return row.id}"
        border
      >
        <el-table-column type="selection" width="60" :reserve-selection="true"></el-table-column>
        <el-table-column prop="myIndex" label="序号" width="60"></el-table-column>
        <el-table-column prop="stationName" label="变电站名称" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="bayName" label="间隔名称" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" width="250" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="phyassetId" label="实物ID" width="180" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="subordinateToSubsystem" label="监测类型" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="proTypeName" label="点位类型" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="name" label="点位名称" width="250" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmUpper" label="告警值上限" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmLower" label="告警值下限" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="upperLimit" label="注意值上限" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="lowerLimit" label="注意值下限" width="180" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alarmType" label="告警方式" width="180" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>{{scope.row.alarmType | alarmTypeFilter}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="openModel" label="是否弹窗" width="180" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>{{scope.row.openModel | openModelFilter}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="isPush" label="是否推送" width="180" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>{{scope.row.isPush | isPushFilter}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="monitoringPoints" label="推送人" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <div class="centerbox">
              <el-button type="primary" @click="tableEdit(scope.row)">修改</el-button>
              <el-button type="primary" @click="tableReset(scope.row)">重置</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="right-online-monitor-page centerbox elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
    <!-- 批量修改弹窗 -->
    <el-dialog title="点位阈值设置" :visible.sync="editStatus" width="11rem" :before-close="handleClose">
      <editPopUp
        v-if="editStatus"
        @handleEdit="handleEdit"
        @handleClose="handleClose"
        :datas="editData"
      />
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="点位阈值设置"
      :visible.sync="editStatus2"
      width="11rem"
      :before-close="handleClose2"
    >
      <editPopUp2
        v-if="editStatus2"
        @handleEdit="handleEdit2"
        @handleClose="handleClose2"
        :datas="editData2"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { publicAPIModule } from "@/store/modules/public";
import editPopUp from "../../components/popup/editPopUp.vue";
import editPopUp2 from "../../components/popup/editPopUp2.vue";

interface optionList {
  value: string;
  label: string;
}

interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component({
  components: {
    editPopUp,
    editPopUp2,
  },
  filters: {
    openModelFilter: (value) => {
      var val = "";
      switch (value) {
        case "1":
          val = "是";
          break;
        case "2":
          val = "否";
          break;
        default:
          val = "";
          break;
      }
      return val;
    },
    isPushFilter: (value) => {
      var val = "";
      switch (value) {
        case "1":
          val = "是";
          break;
        case "2":
          val = "否";
          break;
        default:
          val = "";
          break;
      }
      return val;
    },
    alarmTypeFilter: (value) => {
      var val = "";
      switch (value) {
        case "0":
          val = "注意告警";
          break;
        case "1":
          val = "越限告警";
          break;
        case "2":
          val = "变位告警";
          break;
        case "3":
          val = "闭合告警";
          break;
        case "4":
          val = "断开告警";
          break;
        case "5":
          val = "正常";
          break;
        default:
          val = "";
          break;
      }
      return val;
    },
  },
})
export default class extends Vue {
  // 弹窗状态
  editStatus: boolean = false;
  editStatus2: boolean = false;
  editData: any = {};
  editData2: any = [];

  // 表单
  public form: any = {
    station: "", //站点ID
    bayName: "", //间隔单元名称
    systemId: "", //设备名称
    pointerType: "",
    pointerName: "", //点位名称
    isPush: "", //是否推送
    openModel: "", //是否弹框
  };
  openModel_options: Array<optionList> = [
    {
      value: "1",
      label: "是",
    },
    {
      value: "2",
      label: "否",
    },
  ];
  isPush_options: Array<optionList> = [
    {
      value: "1",
      label: "是",
    },
    {
      value: "2",
      label: "否",
    },
  ];

  tableSelect: any = [];
  //   分页
  pages: pagesType = {
    pageSize: 10,
    page: 5,
    totalSize: 30,
  };

  get tableData() {
    if (
      AuxiliaryMonitorModule.ThresholdItemList.tableData.length &&
      AuxiliaryMonitorModule.ThresholdItemList.tableData.length > 0
    ) {
      // console.log(AuxiliaryMonitorModule.ThresholdItemList.tableData);
      let page = this.pages.page;
      let size = this.pages.pageSize;
      AuxiliaryMonitorModule.ThresholdItemList.tableData.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
    }
    return AuxiliaryMonitorModule.ThresholdItemList.tableData;
  }
  get pageList() {
    return AuxiliaryMonitorModule.ThresholdItemList.pages;
  }
  get pointerType_options() {
    return publicAPIModule.pointerTypeList;
  }
  @Watch("pageList", { immediate: true, deep: true })
  watchPageList() {
    this.pages = this.pageList;
  }
  get treeList3() {
    return AuxiliaryMonitorModule.treeList3;
  }
  @Watch("treeList3", { deep: true })
  settreeList3(value) {
    this.form.station = value.station;
    this.form.bayName = value.bayName;
    this.form.systemId = value.systemId;
    this.onSearch();
  }
  get params() {
    return {
      station: this.form.station, //站点ID
      bayName: this.form.bayName, //间隔单元名称
      systemId: this.form.systemId, //设备名称
      isPush: this.form.isPush, //是否推送
      openModel: this.form.openModel, //是否弹框
      page: this.pages.page || 1, //当前页
      pointerType: this.form.pointerType,
      pointerName: this.form.pointerName, //点位名称
      size: this.pages.pageSize || 10, //每页条数
      type: "3", //设备类型:1：辅控设备，2：主设备，3：在线监测设备,可用值:1,2,3
    };
  }
  mounted() {
    publicAPIModule.getPointerType({ type: 3 });
    AuxiliaryMonitorModule.queryThresholdItem(this.params);
  }

  // ------------------表单里的批量修改----------------
  onEdit() {
    if (this.tableSelect.length < 1) {
      this.$message({
        message: "请至少选择一行数据",
        type: "warning",
      });
    } else if (this.tableSelect.length === 1) {
      this.editData = this.tableSelect;
      this.editStatus = true;
    } else if (this.tableSelect.length > 1) {
      var select = true;
      var s = 0;
      var list = (this.tableSelect[0] as any).proType;
      this.tableSelect.map((k: any, j: number) => {
        if (list !== k.proType) {
          if (s == 0) {
            this.$message({
              message: "点位类型不同，请重新选择",
              type: "warning",
            });
            s = s + 1;
          }
          select = false;
        }
      });
      if (select) {
        this.editData = this.tableSelect;
        this.editStatus = true;
      }
    }
  }
  // 表单里的批量重置
  onReset() {
    if (this.tableSelect.length < 1) {
      this.$message({
        message: "请至少选择一行数据",
        type: "warning",
      });
      return;
    }
    var params = [];
    //  {
    //   pointerId: this.tableSelect[0].phyassetId,
    // };
    this.tableSelect.map((item) => {
      params.push(item.id);
    });
    this.$confirm("是否批量重置？", "", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // 告警值上下限和注意值上下限清空为0
        this.tableSelect = [];
        (this as any).$services
          .bathRestThresholdValueByPointerIds({ data: params, method: "post" })
          .then((res: any) => {
            // console.log(res.data);
            if (res.success) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.onSearch();
            } else {
              this.$message({
                type: "warning",
                message: "操作失败",
              });
            }
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
  }
  // 表单里的查询
  onSearch() {
    this.tableSelect = [];
    (this as any).$refs.multipleTable.clearSelection();
    this.pages.page = 1;
    AuxiliaryMonitorModule.queryThresholdItem(this.params);
  }

  // -------------------表格选择事件--------------------
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   表格里的修改
  tableEdit(row: any): void {
    this.editData2 = row;
    this.editStatus2 = true;
  }
  //   表格里的重置
  tableReset(row: any): void {
    var params = [row.id];
    this.$confirm("是否重置？", "", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        (this as any).$services
          .bathRestThresholdValueByPointerIds({ data: params, method: "post" })
          .then((res: any) => {
            // console.log(res.data);
            if (res.success) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.onSearch();
            } else {
              this.$message({
                type: "warning",
                message: "操作失败",
              });
            }
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
  }
  //   -------------------分页----------------------------
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    AuxiliaryMonitorModule.queryThresholdItem(this.params);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    AuxiliaryMonitorModule.queryThresholdItem(this.params);
  }

  // -------------------------弹窗里的修改-------------------
  handleEdit(val: object) {
    // console.log(val);
    this.$confirm("是否修改？", "", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        (this as any).$services
          .configurePointer({ data: val, method: "post" })
          .then((res: any) => {
            // console.log(res.data);
            if (res.success) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.onSearch();
            } else {
              this.$message({
                type: "warning",
                message: "操作失败",
              });
            }
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
    this.editStatus = false;
  }
  // 弹窗里的取消
  handleClose() {
    this.editStatus = false;
  }
  handleEdit2(val: any) {
    // console.log(111111111, val);
    this.$confirm("是否修改？", "", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        (this as any).$services
          .configurePointer({ data: val, method: "post" })
          .then((res: any) => {
            // console.log(res.data);
            if (res.success) {
              this.$message({
                type: "success",
                message: res.message,
              });
              this.onSearch();
            } else {
              this.$message({
                type: "warning",
                message: "操作失败",
              });
            }
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
    this.editStatus2 = false;
  }
  // 弹窗里的取消
  handleClose2() {
    this.editStatus2 = false;
  }
}
</script>

<style lang="scss" scoped>
.right-online-monitor {
  width: 100%;
  height: 100%;
  &-form {
    width: 100%;
    height: 1.4rem;
    padding: 0.2rem 0.2rem 0 0;
    box-sizing: border-box;
  }
  &-table {
    width: 100%;
    height: calc(100% - 2rem);
    padding: 0 0.2rem;
    box-sizing: border-box;
  }
  &-page {
    width: 100%;
    height: 0.6rem;
  }
}
</style>
<style lang="scss">
.right-online-monitor {
  .el-form-item__content {
    width: calc(100% - 1.3rem);
    .el-select {
      width: 100%;
    }
  }
  .el-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 0.2rem;
    }
  }

  .el-button--primary {
    width: 1.1rem;
  }
  .edit-popup {
    .el-form-item__content {
      width: calc(100% - 1.5rem);
    }
    .el-button--primary {
      width: 1.1rem;
    }

    .el-form-item {
      margin-bottom: 0.38rem;
    }
  }
}
</style>
